<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>史上最残酷的测试 你还能陪伴父母多久</title>
	<meta name ="description" content="史上最残酷的测试 你还能陪伴父母多久">
	<style type="text/css">
		@font-face{ 
			font-family: Arabian;
			src: url("../../../assets/activity/jindi/font/Arabian.ttf");
		}
		@font-face{
			font-family: qxxin;
			src: url("../../../assets/activity/jindi/font/qxxin.ttf");
		}
		@font-face { 
			font-family: "兰亭粗黑简"; 
			src: url('../../../assets/activity/jindi/font/ltch.TTF');
		} 
		@font-face { 
			font-family: "方正兰亭纤黑简体"; 
			src: url('../../../assets/activity/jindi/font/ltqh.TTF');
		}
	</style>
	<link rel="stylesheet" href="/assets/activity/jindi/css/reset.css">
	<link rel="stylesheet" href="/assets/activity/jindi/css/swiper.min.css">
	<link rel="stylesheet" href="/assets/activity/jindi/css/animate.min.css">
	<link rel="stylesheet" href="/assets/activity/jindi/css/common.css">
	<script type="text/javascript" src="/assets/activity/jindi/js/rem.js"></script>
	<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		wx.config(<?php echo $js->config(array('onMenuShareTimeline','onMenuShareAppMessage'), false) ?>);
		wx.ready(function () {
			wx.onMenuShareTimeline({
				title: '史上最残酷的测试 你还能陪伴父母多久', // 分享标题
				desc: '常回家看看，你养我长大，我伴你到老。', // 分享描述
				link: 'http://udfang.com/activity/html5', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: 'http://udfang.com/assets/activity/jindi/img/fish.png', // 分享图标
			});
			wx.onMenuShareAppMessage({
				title: '史上最残酷的测试 你还能陪伴父母多久', // 分享标题
				desc: '常回家看看，你养我长大，我伴你到老。', // 分享描述
				link: 'http://udfang.com/activity/html5', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: 'http://udfang.com/assets/activity/jindi/img/fish.png', // 分享图标
			});
		})
	</script>
</head>
<body>
	<div class="swiper-container">
		<h1 class="logo"><img src="/assets/activity/jindi/img/logo.png" alt=""></h1>
		<div class="player active">
			<img src="/assets/activity/jindi/img/palyer.png" alt="" class="player-img">
			<audio src="http://assets-cdn.udfang.com/music/20170616/h5-jd-bgm.mp3" autoplay="autoplay" loop="loop" id="media"></audio>
		</div>
        <div class="swiper-wrapper">
            <div class="swiper-slide">
            	<div class="core">
					<div class="">
						<img class="fish ani" src="/assets/activity/jindi/img/fish.png" alt="" swiper-animate-effect="fadeIn" swiper-animate-duration="2s">
						<p class="text ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.5s"  swiper-animate-delay="0.5s">
							<span>据说，</span>
							<span>我们对父母的初次感知，</span>
							<span>是从牵手开始。</span>
						</p>
					</div>
					<img class="baby ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s"  src="/assets/activity/jindi/img/baby.jpg" alt="">
				</div>
				<div class="btn btn-alert ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.5s">点击牵起父母的手</div>
				
				<div class="alert">
					<div class="box-shaow box-shaow3">
						<img src="/assets/activity/jindi/img/alert1-1.png" alt="">
					</div>
					<div class="swiper-button-next"></div>
				</div>
            </div>
            <div class="swiper-slide">
            	<div class="core">
					<div class="">
						<img class="girl ani" src="/assets/activity/jindi/img/girl.png" alt="" swiper-animate-effect="fadeIn" swiper-animate-duration="1s">
						<p class="text ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.5s"  swiper-animate-delay="0.5s">
							<span>那时候，</span>
							<span>我们的小手握起笔来，</span>
							<span>还十分吃力</span>
						</p>
					</div>
				</div>
				<div class="btn btn-alert ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.5s">点击握住父母的手</div>
				<div class="alert">
					<div class="box-shaow box-shaow3">
						<img src="/assets/activity/jindi/img/alert2-1.png" alt="">
					</div>
					<div class="swiper-button-next"></div>
				</div>
            </div>
            <div class="swiper-slide">
            	<p class="text-down ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.5s">
					<span>直到有一天，他们放开了手，</span>
					<span>成全了我们的远方。</span>
				</p>
				<div class="btn btn-alert ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.5s">点击放开父母的手</div>
				<div class="alert">
					<div class="box-shaow box-shaow3">
						<img src="/assets/activity/jindi/img/alert3-1.png" alt="">
					</div>
					<div class="swiper-button-next"></div>
				</div>
            </div>
            <div class="swiper-slide">
            	<p class="text-up ani"  swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.5s">
					<span>然而，</span>
					<span>身在远方的我们，</span>
					<span>却似乎忽略了一些事情</span>
				</p>
				<div class="swiper-button-next"></div>
            </div>
            <div class="swiper-slide">
            	<ul class="form" >
					<li>您的年龄？<input type="number" id="ageYou">岁</li>
					<li class="parents">父母的年龄？<input type="number" id="ageFather">／<input type="number" id="ageMother">岁</li>
					<li>一年回家多少天？<input type="number" id="dayHome">天</li>
				</ul>
				<div class="btn" id="btnSum">开始计算</div>
				<div class="swiper-button-next opcity0"></div>
            </div>
            <div class="swiper-slide">
            	<p class="text-down ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.5s">
					<span><strong><span class="years">30</span>年</strong>的光景，</span>
					<span>去掉和朋友聚会，应酬，</span>
					<span>吃饭，睡觉的时间，</span>
					<span>仅剩<strong class="months">1个月</strong>的陪伴！</span>
				</p>
				<img src="/assets/activity/jindi/img/pic-bottom.png" alt="" class="pic-down-left ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s">
				<p class="age"><span class="years">22</span>years</p>
				<div class="swiper-button-next"></div>
            </div>
            <div class="swiper-slide">
            	<p class="text-vertical ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s">
            		<span class="span-v">常回家看看。</span>
            		<span class="span-v">你养我长大，我伴你到老。</span>
            	</p>
            	<p class="text-horizontal ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="1s">
            		<span>不要让我们一直在父母的心里，</span>
					<span>却活在他们的耳朵里。</span>
            	</p>
				<div class="cover">
					<p>阅读数：<span class="num"><?php echo $view_nums;?></span>	</p >
				</div>
            </div>
        </div>
    </div>
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
	<script type="text/javascript" src="/assets/activity/jindi/js/swiper.min.js"></script>
	<script type="text/javascript" src="/assets/activity/jindi/js/swiper.animate1.0.2.min.js"></script>
	<script type="text/javascript">
		var swiper = new Swiper('.swiper-container', {
	        pagination: '.swiper-pagination',
	        nextButton: '.swiper-button-next',
	        direction: 'vertical',
	        onlyExternal : true,
	        onInit: function(swiper){ 
			    swiperAnimateCache(swiper);
			    swiperAnimate(swiper);
			}, 
			onSlideChangeEnd: function(swiper){ 
				swiperAnimate(swiper);
			}
	    });
		$('.btn-alert').on("click",function(){
			$(this).siblings(".alert").fadeIn("slow");
		})
		$('#btnSum').on("click",function(){
			var uAge = $("#ageYou").val();
	    	var fAge = $('#ageFather').val();
	    	var mAge = $('#ageMother').val();
	    	var day = $('#dayHome').val();
	    	var pAge;
	    	var averageAge = 80;
	    	var input = $('.form').find("input").val();
	        if (isNaN(input)) {
	        	alert("请输入数字");
	        	return false;
	        }
	     	if(uAge== ""){
	     		alert("你的年龄不能为空");
	     		return false;
	     	}
	     	if(day == ""){
	     		alert("回家天数不能为空");
	     		return false;
	     	}
			if(fAge == "" && mAge == ""){
				alert('请至少填入父亲／母亲中的一个人的年龄');
				return false;
			}else{
				if(fAge != "" && mAge != ""){
					pAge = fAge > mAge ? mAge : fAge;
				}else{
					if(fAge == ""){
						pAge = mAge;
					}else{
						pAge = fAge;
					}
				}
			}
			var accompanyDays = (averageAge - pAge)*day;
			var month = accompanyDays/30;
			$(this).siblings(".swiper-button-next").click();
	    	$('.years').text(uAge);
	    	$('.months').text(month.toFixed(2) + "个月");
		})
		document.addEventListener("WeixinJSBridgeReady", function () {
		    document.getElementById('media').play();
		}, false);
		$('.player').on("click",function(){
			$(this).toggleClass('active');
			if($('.player').hasClass('active')){
				$(this).find('audio').attr("src","http://assets-cdn.udfang.com/music/20170616/h5-jd-bgm.mp3");
			}else{
				$(this).find('audio').attr("src","");
			}
		})
	</script>
</body>
</html>